<!--  -->
<template>
  <div class='padding20 courseAuditBox'>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="待审批" name="first"></el-tab-pane>
      <el-tab-pane label="已审批" name="second"></el-tab-pane>
    </el-tabs>
    <div v-if='activeName =="first"'>
      <CommonPic :list='courseList' @clickDetail='detailClick'></CommonPic>
      <el-pagination class="pageBar" background @size-change="sizeChange" @current-change="currentChange" :current-page="pageInfo.currentPage" :page-sizes="[2, 5,10, 20, 30]" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <div v-if='activeName =="second"'>
      <div style="display:flex;flex-wrap:wrap; margin: 10px auto">
        <div style="margin-bottom:10px;border:1px solid rgb(229, 229, 229);padding:4px;margin-right:2%;width:18%;;border-radius:4%;" v-for='i in courseList' :key='i.id'>
          <div style="text-align:center">
            <el-image :src="host +i.homePage" alt="" style='width:100%;height:230px;margin-right:10px'>
            <div slot="error" class="image-slot noImage">暂无封面</div>
            </el-image>
          </div>
          <div style="cursor:pointer" @click="detailClick(i, 'alreadyCheck')">
          <div class="firstLine" type="text" style="margin-left:20pxtext-align:left;overflow:hidden;	text-overflow:ellipsis;white-space:nowrap;line-height: 35px">{{i.courseName}}</div>
          <div class="secondLine" style="display:flex;justify-content: space-between;">
            <el-button :type='i.auditStatus ==1?"success":"danger"' size='small'>{{i.auditStatus ==1?"审核通过":"审核未通过"}}</el-button>
            <el-button type="text">
              查看详情
              <i class="el-icon-arrow-right"></i>
            </el-button>
          </div>
          </div>
        </div>
      </div>
      <el-pagination class="pageBar" background @size-change="sizeChange" @current-change="currentChange" :current-page="pageInfo.currentPage" :page-sizes="[2, 5,10, 20, 30]" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>

    </div>
  </div>
</template>

<script>
import operateApi from "../api/operate.service.js";
export default {
  components: {},
  data() {
    return {
      activeName: "first",
      courseList: [],
      pageInfo: {
        currentPage: 1,
        pageSize: 10,
      },
      host: window.location.href.split("/#/")[0] + "/api",
    };
  },
  mounted() {
    this.courseAllCheck({ state: 1, ...this.pageInfo, courseType: "" });
  },
  computed: {},
  watch: {},
  methods: {
    handleClick(tab, event) {
      this.courseList = [];
      switch (tab.name) {
        case "first":
          this.courseAllCheck({
            // courseStatus: 1,
            // auditStatus: 0,
            courseType: "",
            state: 1,
            ...this.pageInfo,
          });
          break;
        case "second":
          // 进度查看
          this.courseAllCheck({
            courseType: "",
            state: 2,
            ...this.pageInfo,
          });
          break;
      }
    },
    async courseAllCheck(obj) {
      let { data } = await operateApi.courseAllCheck(obj);
      this.courseList = data.records;
      this.total = data.totalRecordCount;
    },
    getPicUrl() {},
    detailClick(data, value) {
      this.$router.push({
        path: "/applyDetail",
        query: {
          id: data.id,
          originPath: "/exper/views/operation/courseAudit",
          alreadyCheck: value ? true : false,
        },
      });
    },
    sizeChange(val) {
      this.pageInfo.pageSize = val;
      this.courseAllCheck({
        courseType: "",
        state: this.activeName == "first" ? 1 : 2,
        ...this.pageInfo,
      });
    },
    currentChange(val) {
      this.pageInfo.currentPage = val;
      this.courseAllCheck({
        courseType: "",
        state: this.activeName == "first" ? 1 : 2,
        ...this.pageInfo,
      });
    },
  },
  created() {},
};
</script>
<style>
.el-image{
  background: rgb(223, 223, 223);
  border-radius: 4%;
}
.secondLine .el-button--small{
  height: 35px;
}
.firstLine, .secondLine{
  margin-left: 10px;
}
.courseAuditBox .noImage{
  line-height: 230px;
}
</style>